import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'
import { action } from '@storybook/addon-actions'

import ButtonText from '@baserow/modules/core/components/ButtonText'
import tooltip from '@baserow/modules/core/directives/tooltip'

<Meta
    title="Baserow/Buttons/Text"
    component={ButtonText}
    decorators={[withDesign]}
    argTypes={{
        default: {
            defaultValue: 'Label',
        },
        tag: {
            control: {
                type: 'radio',
                options: ['a', 'button'],
            },
            defaultValue: 'button',
        },
        type: {
            control: {
                type: 'select',
                options: ['primary', 'secondary'],
            },
            defaultValue: 'primary',
        },
        size: {
            control: {
                type: 'radio',
                options: ['regular', 'small'],
            },
            defaultValue: 'regular',
        },
        icon: {
            control: {
                type: 'text',
            },
            defaultValue: 'iconoir-plus',
        },
        href: {
            control: {
                type: 'text',
            },
            defaultValue: '',
        },
        rel: {
            control: {
                type: 'text',
            },
            defaultValue: '',
        },
        target: {
            control: {
                type: 'radio',
                options: ['_self', '_blank'],
            },
            defaultValue: '_self',
        },
        loading: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
        disabled: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# Button Text

The button text component is used to render a button with a label and no border. Optionally an icon can be added to the button.

export const Template = (args, { argTypes }) => ({
    components: { ButtonText },
    props: Object.keys(argTypes),
    template: `<ButtonText v-bind="$props">${args.default}</ButtonText>`,
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?type=design&node-id=1-85&mode=design&t=ZFKwI59cTYQROI8S-0',
}

<Canvas>
    <Story
        name="Default"
        args={{ type: 'primary' }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<ButtonText type="primary" icon="iconoir-plus" size="small"></ButtonText>
```

## Props

<Props of={ButtonText} />

## Tooltip Test

export const TooltipTemplate = (args, { argTypes }) => ({
    components: { ButtonText },
    directives: { tooltip },
    data() {
        return {
            test: false
        }
    },
    template: `
        <div>
            <ButtonText v-tooltip="test ? null : 'hello'">
                test {{ test ? 'without tooltip' : 'with tooltip' }}
            </ButtonText>
            <br><br>
            <button @click="test = !test">Toggle Tooltip</button>
        </div>
    `,
})

<Canvas>
    <Story name="With Tooltip">
        {TooltipTemplate.bind({})}
    </Story>
</Canvas>
